﻿@model QuanLyCayXanh.Models.Tree

@{
    ViewBag.Title = "Create";
}

<h2>Thêm mới cây xanh</h2>

@using (Html.BeginForm("Create","Tree",FormMethod.Post, new { @class = "pure-form pure-form-aligned" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Cây xanh</legend>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.NameVietNam)
            @Html.TextBoxFor(model => model.NameVietNam, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.NameVietNam)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.ScientificName)        
            @Html.TextBoxFor(model => model.ScientificName, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.ScientificName)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.PointX)       
            @Html.TextBoxFor(model => model.PointX, new { @class = "pure-input-1-2" })
            <input type="button" id="get-current-place" value="Lấy vị trí hiện tại" class="pure-button pure-button-primary" /><br />
            @Html.ValidationMessageFor(model => model.PointX, "Phải nhập số", new {style="padding-left:155px;" })
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.PointY)
            @Html.TextBoxFor(model => model.PointY, new { @class = "pure-input-1-2" })
            <input type="button" id="show-pointxy-on-map" value="Hiển thị vị trí" class="pure-button pure-button-primary" /><br />
            @Html.ValidationMessageFor(model => model.PointY, "Phải nhập số", new { style = "padding-left:155px;" })
        </div>       
        <div class="pure-control-group">
            @Html.LabelFor(model => model.Street_Id, "Tên Đường")
            @Html.DropDownListFor(model => model.Street_Id, (SelectList)ViewBag.Street_Id, "Chọn tên đường", new { @class = "pure-input-1-3" })
            @Html.ValidationMessageFor(model => model.Street_Id)
        </div> 
        <div class="pure-control-group">
            @Html.Label("Tên Quận")
            @Html.DropDownList("District_Id", null, "Chọn tên quận/huyện", new { @class = "pure-input-1-3" })
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Ward_Id, "Tên Phường", new { style="margin-top: 8px;" })
            <div id="select-ward" class="pure-u-1-3">@Html.Partial("_SelectWard")</div>
            @Html.ValidationMessageFor(model => model.Ward_Id)
        </div>     
        <div class="pure-control-group">
            @Html.LabelFor(model => model.FamilyTree_Id, "Dòng họ cây")
            @Html.DropDownListFor(model => model.FamilyTree_Id, (SelectList)ViewBag.FamilyTree_Id, "Chọn dòng họ cây", new { @class = "pure-input-1-3" })
            @Html.ValidationMessageFor(model => model.FamilyTree_Id)
        </div>
        <div class="pure-control-group">
            @Html.LabelFor(model => model.GroupOfTree_Id, "Nhóm cây")
            @Html.DropDownListFor(model => model.GroupOfTree_Id, (SelectList)ViewBag.GroupOfTree_Id, "Chọn tên nhóm cây", new { @class = "pure-input-1-3" })
            @Html.ValidationMessageFor(model => model.GroupOfTree_Id)
        </div>   
        <div class="pure-form-stacked pure-g">
            <div class="pure-u-3-24" style="width:14%">Thuộc tính cây</div>

            <div class="pure-u-md-1-5">
                @Html.LabelFor(model => model.Age)
                @Html.EditorFor(model => model.Age)
                @Html.ValidationMessageFor(model => model.Age)
            </div>

            <div class="pure-u-md-1-5">
                @Html.LabelFor(model => model.Height)
                @Html.TextBoxFor(model => model.Height)
                @Html.ValidationMessageFor(model => model.Height)
            </div>

            <div class="pure-u-md-1-5">
                @Html.LabelFor(model => model.Diameter)
                @Html.EditorFor(model => model.Diameter)
                @Html.ValidationMessageFor(model => model.Diameter)
            </div>

            <div class="pure-u-md-1-5">
                @Html.LabelFor(model => model.DateOfPlanting)
                @Html.EditorFor(model => model.DateOfPlanting)
                @Html.ValidationMessageFor(model => model.DateOfPlanting)
            </div>

        </div>
        

        <div class="pure-control-group">
            @Html.LabelFor(model => model.DateOfDeath)
            @Html.EditorFor(model => model.DateOfDeath)
            @Html.ValidationMessageFor(model => model.DateOfDeath)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.ReasonForDeath)
            @Html.TextAreaFor(model => model.ReasonForDeath, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.ReasonForDeath)
        </div>

        <div class="pure-controls">
            <input type="submit" value="Thêm mới" class="pure-button pure-button-primary" />
            @Html.ActionLink("Quay lại danh sách", "Index", null, new { @class = "pure-button" })
        </div>
</fieldset>
}
<div id="map-canvas" style="width:100%;height:300px;">

</div>


<script>
    $(document).ready(function () {
        $("#get-current-place").click(function () {
            getCurrent();
        })

        $("#show-pointxy-on-map").click(function () {
            var x = $("#PointX").val();
            var y = $("#PointY").val();
            if (x != "" && y != "" && !$("#PointX").hasClass("input-validation-error") && !$("#PointY").hasClass("input-validation-error"))
                showPointOnMap(x, y);
            else
                alert("Xem lại vị trí")
        })
    })

    
</script>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
@Html.Partial("~/Views/Shared/_GoogleMap.cshtml")
<script type="text/javascript">
    $(function () {
        $("#District_Id").change(function () {
            $.ajax({
                url: '@Url.Action("_GetSelectWard")',
                data: { District_Id: $("#District_Id").val() },
                type: 'POST',
                success: function (data) {
                    $("#select-ward").html(data);
                }
            });
        })
    });
</script>